<template>
    <div>
      <h4>查看小程序</h4>
      <a-form-model-item label="获取小程序码" :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }">
        <a-button type="link" @click="onClickQrcode" :disabled="btn_loading">点击获取</a-button>
      </a-form-model-item>
      <a-divider />
      <div class="upload-wrap">
        <a-steps :current="step_current">
          <a-step title="扫描二维码登录" />
          <a-step title="预览小程序" />
          <a-step title="上传成功" />
        </a-steps>
        <div class="uploadBox">
          <h4>发布设置:</h4>
          <div class="getCode">
            <span>获取登录二维码</span>
            <a-button type="link" :loading="login_btn_loading" @click="getLoginQrcode" v-if="show_get_login_qrcode_btn">
              获取登录二维码
            </a-button>
            <a-button type="link" :loading="preview_btn_loading" @click="getPreviewQrcode" v-if="login_qrcode">
              微信已扫描
            </a-button>
            <a-button type="link" :loading="upload_btn_loading" @click="onUpload" v-if="show_preview_content">
              上传小程序
            </a-button>
            <div class="wxdev-login-block" style="display: flex; flex-direction: column; align-items: center" v-if="login_qrcode">
              <img
                :src="login_qrcode"
                class="wxdev-tool-login-qrcode"
                style="height: 300px; width: 300px; margin: 10px auto"
              />
              <div>请使用小程序管理员或开发者微信扫码登录</div>
            </div>
            <div v-if="show_preview_content" style="display: block">
              <div class="wxdev-preview-block" style="display: flex; flex-direction: column; align-items: center">
                <img
                  :src="preview_qrcode"
                  class="wxdev-tool-preview-qrcode"
                  style="height: 300px; width: 300px; margin: 10px"
                />
                <div>扫描二维码预览小程序</div>
              </div>
            </div>
            <div v-if="show_upload_content">
              <div class="mb-3">
                上传成功！请登录微信小程序平台（<a href="https://mp.weixin.qq.com/" target="_blank"
                  >https://mp.weixin.qq.com/</a
                >）发布小程序
              </div>
              <br />
              <div class="mb-3">
                <div>
                  版本号：<span class="upload-version">{{ upload_version }}</span>
                </div>
                <br />
                <div>
                  描述：<span class="upload-desc">{{ upload_desc }}</span>
                </div>
              </div>
            </div>
            <div style="margin-top: 20px">
              <a-alert :message="tongzhi" banner type="warning" v-if="tongzhi" />
            </div>
          </div>
        </div>
      </div>
    <a-modal title="小程序码" :visible="modal_visible" :footer="null" @cancel="modal_visible = false">
      <div class="modal-qrcode">
        <img :src="qrcode" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getQrcode, getLoginQrcode, getPreviewQrcode, uploadWechat } from '@/api/setting/serverWechatUpload'

export default {
  name: 'ServerMiniUpload',
  components: {},
  data() {
    return {
      btn_loading: false,
      login_btn_loading: false,
      preview_btn_loading: false,
      upload_btn_loading: false,
      modal_visible: false,
      qrcode: '',
      step_current: 0,
      login_qrcode: '',
      preview_qrcode: '',
      tongzhi: '',
      show_get_login_qrcode_btn: true,
      show_preview_content: false,
      show_upload_content: false,
      upload_version: '',
      upload_desc: '',
    }
  },
  methods: {
    onClickQrcode: function () {
      this.btn_loading = true
      getQrcode()
        .then((res) => {
          if (res.code == 0) {
            this.qrcode = res.data
            this.modal_visible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.btn_loading = false
        })
    },
    // 获取登录二维码
    getLoginQrcode: function () {
      this.login_btn_loading = true
      this.tongzhi = ''
      getLoginQrcode({})
        .then((res) => {
          if (res.code == 0) {
            this.login_qrcode = res.data.qrcode
            if (this.login_qrcode != '') {
              this.show_get_login_qrcode_btn = false
            } else {
              this.tongzhi = res.tongzhi
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
          this.login_btn_loading = true
          getLoginQrcode({}).then(res => {
            if (res.code == 0) {
              this.login_qrcode = res.data.qrcode
              if (this.login_qrcode != '') {
                this.show_get_login_qrcode_btn = false
              } else {
                this.tongzhi = res.tongzhi
              }
            } else {
              this.$message.error(res.msg)
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('请求出错，请重新点击按钮')
          }).then(() => {
            this.login_btn_loading = false
          })
        })
        .then(() => {
          this.login_btn_loading = false
        })
    },
    // 获取预览二维码
    getPreviewQrcode: function () {
      this.tongzhi = ''
      this.preview_btn_loading = true
      getPreviewQrcode({})
        .then((res) => {
          if (res.code == 0) {
            if (res.data.qrcode != '') {
              this.preview_qrcode = res.data.qrcode
              this.login_qrcode = ''
              this.show_preview_content = true
              this.step_current = 1
              this.tongzhi = res.tongzhi
            }
          }
          if (res.code == -1) {
            this.tongzhi = res.tongzhi
          }
          if (res.code == 1) {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
          this.preview_btn_loading = true
          getPreviewQrcode({}).then(res => {
            if (res.code == 0) {
              if (res.data.qrcode != '') {
                this.preview_qrcode = res.data.qrcode
                this.login_qrcode = ''
                this.show_preview_content = true
                this.step_current = 1
                this.tongzhi = res.tongzhi
              }
            }
            if (res.code == -1) {
              this.tongzhi = res.tongzhi
            }
            if (res.code == 1) {
              this.$message.error(res.msg)
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('请求出错，请重新点击按钮')
          }).then(() => {
            this.preview_btn_loading = false
          })
        })
        .then(() => {
          this.preview_btn_loading = false
        })
    },
    // 上传小程序
    onUpload: function () {
      this.tongzhi = ''
      this.upload_btn_loading = true
      uploadWechat({})
        .then((res) => {
          if (res.code == 0) {
            this.upload_version = res.data.version
            this.upload_desc = res.data.desc
            this.step_current = 2
            this.show_preview_content = false
            this.show_upload_content = true
          }
        })
        .catch((error) => {
          console.log(error)
          uploadWechat({}).then(res => {
            if (res.code == 0) {
              this.upload_version = res.data.version
              this.upload_desc = res.data.desc
              this.step_current = 2
              this.show_preview_content = false
              this.show_upload_content = true
            }
          }).catch(error => {
            console.log(error)
            this.$message.error('请求出错，请重新点击按钮')
          }).then(() => {
            this.upload_btn_loading = false
          })
        })
        .then(() => {
          this.upload_btn_loading = false
        })
    },
  },
}
</script>
<style scoped>
.label {
  position: relative;
  top: 1px;
}
.modal-qrcode {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-qrcode img {
  width: 300px;
  height: 300px;
  display: inline-block;
}
.upload-wrap {
  padding: 0 50px;
  margin-top: 40px;
}
.wxapp-body {
  padding: 50px;
  text-align: center;
}
.wxapp-body div {
  display: inline-block;
}
.uploadBox {
  width: 40%;
  margin: 20px auto;
  background-color: #f8f8f8;
  padding: 24px;
}
</style>
